<template>
    <div class="main_bd">
        <div class="pro_banner">
            <img :src="banner">
        </div>
        <div class="main pro">
            <loading :isOpen="isOpen"></loading>
            <el-row class="pro_bd" :gutter="24">
                <el-col :span="6" class="left">
                    <div class="grid-content">
                        <ul>
                            <li v-show="no_sort">暂无分类</li>
                            <li v-bind:class="{'left_active':lis.id==cid_focus,'back_active':cid==lis.id,'left_active2':index==0 && $route.params.cid==null}" v-for="(lis,index) in sorts" :key="lis.sor" @click="active($event,index,lis.id)" :id="lis.id">
                                {{lis.name}}
                            </li>
                        </ul>
                        <div class="ad" v-show="no_adver==false">
                            <a :href="adver_url">
                            <img :src="adver.img">
                            </a>
                        </div>
                        
                        <p style="display:none" ref="cid">{{$route.params.cid}}</p>
                        
                    </div>
                </el-col>

                <el-col :span="18">
                    <div class="pro_img grid-content">
                        <div class="noData" v-if="page==0 || page_undefine">暂无数据</div>
                        <el-row class="pro_right">
                            
                            <el-col :span="6" v-for="pro in pro_list" :key="pro.list" class="pro_list">
                                <router-link :to="{name:'prodetail',params:{id:pro.id}}">
                                    <div class="grid-content pro_item">
                                        <div class="pro_item_img">
                                            <img :src="pro.logo">
                                        </div>
                                        <div class="pro_item_desc">
                                            <p class="pro_title">{{pro.title }}</p>
                                            <p class="pro_desc">{{pro.summary}}</p>
                                        </div>
                                    </div>
                                </router-link>
                                
                            </el-col>
                        </el-row>
                        <div id="page" v-if="videoData">
                            <el-pagination @current-change="pageIndexChange" :page-size="8" :current-page="current_page" layout="prev, pager, next" :total="sum_.total">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
var page = 1;
import loading from './Loading'
export default {
    name: 'product',
    data() {
        return {
            pro_list: [],
            isOpen: true,
            sorts: [],
            banner: [],
            list: [],
            id: '',
            cid: '',
            nowIndex: 0,
            current_page: 1,
            page: [],
            cid_focus: 0,
            videoData:true,
            no_sort:false,
            sum_:[],
            page_undefine:false,
            com_id:localStorage.getItem("companyid"),
            adver:[],
            no_adver:false,
            company_name:[],
            adver_url:[]
        }
    },
    components:{ loading},
    mounted() {
        var self=this;
        setTimeout(function(){
            var com_id=localStorage.getItem("companyid");
            self.com_id=com_id;
            self.loadSort();
            //this.loadnews();
            self.loadBanner();
            self.loadAdver();
        },300)     
    },
    methods: {
        loadAdver:function(){
            this.$http.get('http://thy.588net.com/index.php/api/company.adv/get_adv?' + 'company_id=' + this.com_id).then(function(res) {
               //console.log(res.body.data)
                var len=res.body.data.adv;
               if(res.body.code==1002){
                this.no_adver=true;
               }
               if(res.body.code==200){
                   for(var i=0;i<len.length;i++){
                       if(len[i].position=="product_aside"){
                           this.adver=len[i];
                           var init_='http://'
                           var ad_url=this.adver.url;
                          if(ad_url==''){
                                 this.adver_url='javascript:'
                           }else{
                                 if(ad_url.indexOf("http://")>=0){
                                    //alert("格式正确")
                                    this.adver_url=ad_url;
                                }else{
                                    //alert("格式bu正确")
                                    this.adver_url=init_.concat(ad_url);
                                    //console.log(adver_url)
                                }
                           }
                       }
                       console.log(this.sns)
                   }
                   
                   this.no_adver=false;
               }

               //alert(this.no_adver)
               
            })
        },
        loadSort: function() {
            this.$http.get('http://thy.588net.com/index.php/mall/product/get_product_cate?' + 'company_id=' + this.com_id).then(function(res) {
                
                if(res.body.data==''||res.body.data==null){
                    //alert('kongle')
                    this.no_sort=true;
                }else{
                    this.no_sort=false;
                    this.sorts = res.body.data;
                this.id = res.body.data[0].id;
                this.loadProlist(this.id);
                this.cid_focus = this.$route.params.cid;
                }
            })
        },
        loadProlist: function(id, page) {
            //alert(id)
            var page = this.current_page;
            var cid = this.$refs.cid.innerHTML;
            window.scrollTo(0, 0);
            //console.log(this.id)
            
            if (this.$refs.cid.innerHTML == '') {
                //alert('分类id空')          
                    this.$http.get('http://thy.588net.com/index.php/mall/product/getProductList?' + 'company_id=' + this.com_id + '&page_size=' + 8 + '&page=' + page + '&cid=' + id + '&is_web=' + 1).then(function(res) {
                        this.pro_list = res.body.data.data;
                        this.sum_=res.data.data;
                        this.page = res.data.data.total;
                        console.log(this.page.total)
                        if(this.page-8<=0){
                            this.videoData=false;
                            
                        }
                        this.isOpen = false;
                    })
            }else {
                //alert('分类id不为空')
                this.$http.get('http://thy.588net.com/index.php/mall/product/getProductList?' + 'company_id=' + this.com_id
                 + '&page_size=' + 8 + '&page=' + page + '&cid=' + cid + '&is_web=' + 1).then(function(res) {
                    this.pro_list = res.body.data.data;
                    this.sum_=res.data.data;
                   this.page = res.data.data.total;
                    console.log(this.page)
                    //alert(this.page.length)
                     if(this.page-8<=0){
                        this.videoData=false;
                    }
                    this.isOpen = false;
                })
            }
        },
        pageIndexChange: function(val) {
            this.current_page = val;
            this.loadProlist(this.id);
        },
        loadBanner() {
            this.$http.get('http://thy.588net.com/index.php/api/Company/get_company_index?' + '&company_id=' + this.com_id).then(function(res) {
                this.banner = res.body.data.company.product_banner;
                this.company_name=res.body.data.company.name;
                document.title = '产品列表-'+this.company_name;
            })
        },
        active(event, index, id) {
           // alert('dianji')
            //event 当前对象  index 为遍历条目索引  id为遍历条目id
            page = 1;//初始化请求第一页
            this.current_page = 1;            
            this.id = id;//更新id值
            this.cid_focus = id;//当前高亮
            //this.loadProlist(this.id, this.current_page);//更新注入数据
            this.$http.get('http://thy.588net.com/index.php/mall/product/getProductList?' + 'company_id=' + this.com_id + '&page_size=' + 8 + '&page=' + page + '&cid=' + this.id + '&is_web=' + 1).then(function(res) {
                this.pro_list = res.body.data.data;
                this.sum_=res.data.data;
                this.page = res.data.data.total;
                 if(this.page-8<=0){
                    this.videoData=false;
                }
                //console.log(this.page)
                //alert(this.page)
                if(this.page==undefined){
                    this.page_undefine=true;
                }else{
                    this.page_undefine=false;
                }
            })
            this.$route.params.cid = id;
            //console.log( this.pro_list)
        },
        getStatus(urlStr) {
            var urlStrArr = urlStr.split('/')
            return urlStrArr[urlStrArr.length - 1]
        },
        left: function() {
            this.cid = this.$refs.cid.innerHTML;

        }

    },
    activated: function() {
        $(".is-active").removeClass("is-active");
        var self=this;
        //this.loadProlist();
        if (this.cid != '') {
            this.nowIndex = 1000
        }
         setTimeout(function() {
            self.loadSort();
            self.loadBanner();
        }, 500);

       
    }
}
</script>

<style scoped>
.main_body{
    background: #f5f5f5;
}
.noData{
    font-size: 20px;
    color:#5a5a5a;
    padding: 20px;
}
.back_active {
    background: #2277ff;
    color: #fff!important
}

.back_active a {
    color: #fff
}

#page {
    text-align: center;
    padding-bottom: 20px
}

.pro_right {
    background: #fff;
    padding: 2.666%;
    padding-bottom: 0;
}

.loadTip {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    clear: both;
    color: #a5a5a5;
}

.loadTip img {
    width: 40px;
    height: 40px;
    vertical-align: bottom;
    margin-right: 10px
}

.showLoad {
    display: none
}

.footer {
    background: #f5f5f5;
}

.pro_list {
    /* padding: 20px 0; */
    /* background: #fff; */
    margin-bottom: 20px
}

a {
    color: #a5a5a5;
    text-decoration: none
}

.main_bd {
    background: #f5f5f5!important
}

.pro_img .el-col-6 {
    width: 23%;
    margin-right: 2.6666%;
}

.pro_img .el-col-6:nth-of-type(4n) {
    margin-right: 0
}

.pro_img .el-col-12:nth-of-type(even) {
    margin-right: 0
}

.pro_bd {
    margin-top: 24px
}

.pro_banner {
    width: 1200px;
    margin: 0 auto;
    height: 200px;
}


.left ul {
    background: #fff;
    box-shadow: 0px 0px 6px 0 #d8d8d8;
}

.left ul li {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #5a5a5a;
    cursor: pointer;
}

.left_active {
    background: #2277ff;
    color: #fff!important;
}

.left_active2 {
    background: #2277ff;
    color: #fff!important;
}

.pro_banner img {
    width: 100%;
    height: 200px;
}

.main {
    max-width: 1200px;
    margin: 0 auto;
    
}



.pro_item_desc p {
    margin: 0;
}

.pro_img {
    margin-bottom: 3px;
    box-shadow: 0 0 6px 0px #d8d8d8;
    background: #fff;
}

.pro_title {
    height: 40px;
    line-height: 20px;
    font-size: 14px;
    color: #5a5a5a;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 5px 0!important;
}

.pro_desc {
    height: 48px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    overflow: hidden;
    font-size: 14px;
    color: #a5a5a5;
}

.pro_price {
    height: 40px;
    line-height: 40px
}

.pro_item {
    border-radius: 6px;
    /* border: 1px solid #d8d8d8; */
    /* margin-bottom: 20px */
}

.pro_price b {
    float: right
}

.pro_price span {
    float: right;
    font-size: 26px;
    color: red
}

.pro_item_img img {
    width: 100%;
    height: 200px;
    transition: all ease .8s;
}

.pro_item_img {
    overflow: hidden;
    width: 100%;
    height: 200px;
}

.pro_item_img img:hover {
    transform: scale(1.2)
}

.pro_name {
    height: 30px;
    line-height: 30px;
}

.pro_price {
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px!important
}

.pro_price span {
    color: #ff0000;
}

.ask {
    margin: 10px 0;
}

.el-row {
    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}



.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.pagenation {
    text-align: center
}
</style>
